<template>
  <div class="serial-port-communication">
    <div class="port-selection">
      <div>
        <h3>Ground Station</h3>
        <select v-model="groundPort" @change="openPort('ground')">
          <option v-for="port in ports" :key="port.path" :value="port.path">
            {{ port.path }}
          </option>
        </select>
      </div>
      <div>
        <h3>Drone</h3>
        <select v-model="dronePort" @change="openPort('drone')">
          <option v-for="port in ports" :key="port.path" :value="port.path">
            {{ port.path }}
          </option>
        </select>
      </div>
    </div>
    <div class="logs">
      <div>
        <h3>Ground Station Logs</h3>
        <div class="log" v-for="log in groundLogs" :key="log.timestamp">
          {{ log.message }}
        </div>
      </div>
      <div>
        <h3>Drone Logs</h3>
        <div class="log" v-for="log in droneLogs" :key="log.timestamp">
          {{ log.message }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import SerialPort from "serialport";
// import { ByteLengthParser } from '@serialport/parser-byte-length';

// const { SerialPort } = require("serialport");
// const { ByteLengthParser } = require('@serialport/parser-byte-length');
// const { mavlink10, MAVLink10Processor } = require('../utils/mavlink10.js');

export default {
  name: "SerialPortCommunication",
  setup() {
    const ports = ref([]);
    const groundPort = ref("");
    const dronePort = ref("");
    const groundLogs = ref([]);
    const droneLogs = ref([]);
    let groundSerialPort = null;
    let droneSerialPort = null;

    const listPorts = async () => {
      ports.value = await SerialPort.list();
    };

    const openPort = (type) => {
      const portPath = type === "ground" ? groundPort.value : dronePort.value;
      const serialPort = new SerialPort({ path: portPath, baudRate: 115200 });
      // const parser = serialPort.pipe(new ByteLengthParser({ length: 8 }));

      // parser.on('data', (data) => {
      serialPort.on("data", (data) => {
        const log = {
          timestamp: Date.now(),
          message: `Received: ${data.toString("hex")}`,
        };
        if (type === "ground") {
          groundLogs.value.push(log);
        } else {
          droneLogs.value.push(log);
        }
      });

      if (type === "ground") {
        groundSerialPort = serialPort;
      } else {
        droneSerialPort = serialPort;
      }
    };

    onMounted(() => {
      // listPorts();
    });

    return {
      ports,
      groundPort,
      dronePort,
      groundLogs,
      droneLogs,
      openPort,
    };
  },
};
</script>

<style scoped>
.serial-port-communication {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.port-selection {
  display: flex;
  justify-content: space-between;
}

.logs {
  display: flex;
  justify-content: space-between;
}

.log {
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
}
</style>
